/**
 * 子路由
 */

var routes = [
    {
        path: "/",
        component: {
            template :`
            <div>
                <h1>首页</h1>
            </div>
            `
        }
    },
    {
        path: "/user/:name",
        component: {
            template :`
            <div>
                <h1>姓名：{{$route.params.name}}</h1>
                <h2>年龄：{{$route.query.age}} 岁</h2>
                <!-- <router-link to="more" append>了解更多</router-link> -->
                <router-link :to="'/user/' + $route.params.name + '/more'">了解更多</router-link>
                <router-view></router-view>
            </div>
           `
        },
        children : [{
            path: "more",
            component: {
                template :`
                <div>
                {{$route.params.name}}的更多信息
                ladsnaskndlasndl;anksldnownaldksnld calsc lasbcabs lcfjasnldnwialdn sl
                </div>
            `
            }
        }]
    },
    {
        path: "/about",
        component: {
            template :`
            <div>
                <h1>关于我</h1>
            </div>
           `
        },

    },
    
]
var vueRouter = new VueRouter({
    routes : routes
})

var app = new Vue({
    el : "#app",
    router : vueRouter,
})